<template>
	<view class="rd-character yb-flex">
		<view @tap="app.$business.openDetail(item)" class="yb-flex yb-row yb-align-center" :style="{
			'margin-bottom': index < list.length - 1 ? '20rpx' : 0
		}" v-for="(item, index) in list" :key="index">
			<view class="rd-character-avatar" :style="{'border-color': skinColor.color_bg_1, 'background-color': skinColor.color_bg_1}">
				<yb-avatar lazyLoad :size="60" :src="item.avatar || app.$business.filterSource(item.source).logo || '/static/logo.png'"></yb-avatar>
			</view>
			<view class="yb-flex yb-flex-1" style="margin-left: 20rpx;">
				<view class="yb-flex yb-row">
					<yb-text custom-class="yb-flex-1" :size="32" weight="bold" :lines="1" :color="titleColor || skinColor.color_1" :value="item.title" />
					<template v-if="app.$business.isFollowee(item.id)">
						<yb-button stop @click="app.$business.toFollowee(item)" type="warning" :options="{
							bgColor: skinColor.color_gap_1,
							radius: '30rpx',
							size: '24rpx'
						}" custom-style="width:130rpx;height:40rpx;margin-left:20rpx;" :icon="{
							name: 'dec',
							size: '30'
						}" value="已关注"></yb-button>
					</template>
					<template v-else>
						<yb-button stop @click="app.$business.toFollowee(item)" type="warning" :options="{
							radius: '30rpx',
							size: '24rpx'
						}" custom-style="width:130rpx;height:40rpx;margin-left:20rpx;" :icon="{
							name: 'inc',
							size: '30'
						}" value="关注"></yb-button>
					</template>
				</view>
				<yb-text
				style="margin-top: 10rpx;"
				:size="22"
				:lines="1"
				:color="descColor || skinColor.color_3"
				:value="item.desc || '这个人很懒，什么都没有留下'" /></text>
			</view>
		</view>
	</view>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default{
		mixins: [appMixin],
		props: {
			list: {
				type: Array,
				default () {
					return new Array
				}
			},
			titleColor: {
				type: String,
				default: ''
			},
			descColor: {
				type: String,
				default: ''
			}
		}
	}
</script>

<style>
	.rd-character-avatar {
		border-style: solid;
		border-width: 5rpx;
		border-radius: 120rpx;
	}
</style>